<template>
	<div class="task-basic-info">
		<el-form :model="basicInfoData" style="height:100%;" :inline="true" label-width="80px" :rules="rules" ref="basicInfoData" class="demo-ruleForm">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="模板名称" prop="name" v-if = "createType == '添加模板'">
						<el-input  v-model="basicInfoData.name" size="mini" placeholder="名称" style="width:100%"></el-input>
					</el-form-item>
					<el-form-item label="名称" prop="name" v-if = "createType == '任务创建'">
						<el-input  v-model="basicInfoData.name" size="mini" placeholder="名称" style="width:100%"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否盲码" prop="doAuto">
						<el-select  v-model="basicInfoData.doBlind" placeholder="请选择" size="mini" style="width:100%">
							<el-option :key="true" :value="true" label="是"></el-option>
							<el-option :key="false" :value="false" label="否"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="客户" prop="client">
						<el-select clearable filterable style="width:100%" v-model="basicInfoData.client" @change="clientSelect" placeholder="请选择或先到客户管理维护" size="mini">
							<el-option v-for="item in inspectionUnitTableDate2" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="采样来源" prop="source">
						<el-select  v-model="basicInfoData.source" placeholder="请选择" size="mini" style="width:100%">
							<el-option v-for="item in sampleSourceData" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>

				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="类型" prop="taskType">
						<el-select  @change='typeSelect' style="width:100%" v-model="basicInfoData.taskType" placeholder="请选择" size="mini">
							<el-option v-for="item in reportWordList.itemList" :key="item.code" :label="item.name" :value="item.code">
							</el-option>
						</el-select>
					</el-form-item>

				</el-col>

        
        <el-col :span="12" v-if="createType != '任务创建'">
          <el-form-item :label="stationName" prop="offices">
            <el-select v-model="basicInfoData.offices" placeholder="请选择" size="mini" style="width:100%">
              <el-option label="全部" value="ALL" v-if="!(stationList && stationList.length)"></el-option>
              <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" >
        	<el-form-item label="加测码" prop="uniqueCode">
            <el-input  v-model="basicInfoData.uniqueCode" size="mini" placeholder="加测码" style="width:100%"></el-input>
        
        	</el-form-item>
        </el-col>

			</el-row>
      <el-row :gutter="20">
      	<el-col :span="12" v-if="createType == '任务创建' && basicInfoData.source == 0 ">

      		<el-form-item label="采样日期" prop="collectionDate">
      			<el-date-picker clearable v-model="basicInfoData.collectionDate" type="date" size="mini" placeholder="选择日期" value-format='yyyy-MM-dd'
      			 style="width: 100%;">
      			</el-date-picker>
      		</el-form-item>
      	</el-col>
        <el-col :span="12" >
        	<el-form-item :label="stationName" prop="offices"  v-if="createType == '任务创建'">
        		<el-select v-model="basicInfoData.offices" placeholder="请选择" size="mini" style="width:100%">
        			<el-option label="全部" value="ALL" v-if="!(stationList && stationList.length)"></el-option>
        	        <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id">
        			</el-option>
        		</el-select>
        	</el-form-item>
        </el-col>
      </el-row>
		</el-form>
		<el-row style="text-align: center;" class="commonFooter">
			<el-button @click="beforeStep" v-if="createType == '任务创建'" size="mini">上一步</el-button>
			<el-button type="primary" @click="afterStep('basicInfoData')" size="mini">下一步</el-button>
		</el-row>
	</div>
</template>

<script>
	import { mapState } from 'vuex'

	export default {
		name: 'task-basic-info',
		props: ['newTaskBasic', 'createType'],
		data() {
			return {
				basicInfoData: {},
				rules: {
					name: [
						{ required: true, message: '请输入名称', trigger: 'blur' },],
					taskType: [
						{ required: true, message: '选择类型', trigger: 'blur' },],
					client: [
						{ required: true, message: '请选择或先到客户管理维护', trigger: 'blur' },],
					doAuto: [
						{ required: true, message: '请选择', trigger: 'blur' },],
					source: [
						{ required: true, message: '请选择采样来源', trigger: 'blur' }
					],
					offices: [
						{ required: true, message: '请选择', trigger: 'blur' }
					],
					// collectionDate: [
					// 	{ required: true, message: '请输入日期', trigger: 'change' },],
				},
				sampleSourceData: [
					{
						value: 0,
						label: '采样'
					}, {
						value: 1,
						label: '送样'
					}
				],
				stationName:"厂站",
				stationList:[],
			}
		},
		computed: {
			...mapState(['reportWordList', 'inspectionUnitTableDate2'])
		},
		mounted() {
			this.basicInfoData = this.newTaskBasic
			console.log(this.basicInfoData)
			this.getStaion();
		},
		methods: {
			getStaion(){
				this.stationName = this.util.getStationName()
				this.stationList = this.util.getStationList()
				if(this.stationList && this.stationList.length) {
					this.basicInfoData.offices = this.stationList[0].id
				}
				// console.log(this.stationList)

			},
			typeSelect(val) {
				this.basicInfoData.reportWord = val
			},
			//			通过客户id获取检测区域信息
			clientSelect(val) {
				this.$store.dispatch('getMonitorZones', val)
			},
			beforeStep() {
				this.$parent.$parent.changeTab('newWay')

			},
			afterStep(formName) {
				this.$parent.$parent.showNewTaskData()
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$parent.$parent.changeTab('selectCheckPiont')
						this.$store.dispatch('getMonitorZones', this.basicInfoData.client)
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}

</script>

<style>

</style>
